<template>
  <div class="score-card">
    <div class="header">
      <div
        class="info-icon"
        @mouseenter="showTooltip = true"
        @mouseleave="showTooltip = false"
      >
        <div class="icon-circle">
          <img
            :src="iconPath"
            :alt="`${headerTitle} icon`"
            class="icon-image"
          />
        </div>
        <div class="tooltip" v-show="showTooltip">
          {{ iconTooltip }}
        </div>
      </div>
      <div class="title">{{ headerTitle }}</div>
      <div class="detail-btn" @click="goDetails(headerTitle)">
        <img src="@/assets/eye.png" alt="View details" />
      </div>
    </div>
    <div class="percentage">25%</div>
    <div class="chart">
      <PieChart :option="pieChartOptions" style="height: 0.9061rem" class="pie-chart"></PieChart>
    </div>
    <div class="goal-container">
      <div class="spacer"></div>
      <div class="goal">
        <div class="goal-label">Goal:</div>
        <div class="goal-value">9.4</div>
      </div>
    </div>
  </div>
</template>

<script>
import PieChart from "@components/common/PieChart.vue";
import defaultIcon from "@/assets/pieIcon/bigbed.png";

export default {
  components: {
    PieChart,
  },
  props: {
    headerTitle: String,
    iconPath: {
      type: String,
      default: defaultIcon,
    },
    showScoreRange: {
      type: Boolean,
      default: false,
    },
    showLegend: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showTooltip: false,
      iconTooltip: "+3% from last week",
      pieChartOptions: {
        tooltip: {
          trigger: "item",
          borderColor: "#9e9e9e",
          borderWidth: 1,
          borderRadius: 4,
          padding: 8,
          textStyle: {
            color: "#454545",
            fontSize: 12,
          },
          formatter(params) {
            const titleStyle = "font-weight:600;font-size:12px;color:#454545;";
            const contentStyle = "font-weight:400;font-size:10px;color:#000;";

            return `
              <div style="${titleStyle}">${params.name}</div>
              <div style="${contentStyle}">&bull; ${params.value}</div>
              <div style="${contentStyle}">&bull; ${params.percent}%</div>
            `;
          },
          extraCssText: "box-shadow: 0 2px 10px rgba(0,0,0,0.1);",
        },
        legend: {
          show: this.showLegend,
          orient: "vertical",
          right: "0",
          bottom: "0%",
          itemHeight: 8,
          data: [
            { name: "check in", icon: "circle" },
            { name: "check out", icon: "circle" },
          ],
          itemGap: 1,
          textStyle: {
            padding: [0, 0, 5],
            fontSize: 10,
          },
        },
        graphic: {
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: "50%",
            textAlign: "center",
            fill: "#000",
            fontSize: 14,
            fontWeight: "bold",
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            top: "5%",
            left: "10%",
            right: "10%",
            bottom: "5%",
            radius: ["65%", "100%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 15,
              borderColor: "#fff",
              borderWidth: 10,
            },
            label: {
              show: true,
              formatter: " {d}%",
              position: "outside",
              padding: [0, -30],
            },
            labelLine: {
              show: false,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            data: [
              {
                value: 300,
                itemStyle: { color: "#CE4049" },
                name: "Negative Reviews",
              },
              {
                value: 300,
                itemStyle: { color: "#EFB82C" },
                name: "Neutral Reviews",
              },
              {
                value: 600,
                itemStyle: { color: "#2FAA68" },
                name: "Positive Reviews",
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    goDetails(headerTitle) {
      this.$emit("clickTitle", headerTitle);
    },
  },
};
</script>

<style scoped lang="scss">
.score-card {
  padding: 6px 13px 6px 14px;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  min-height: 0;
  border-radius: 20px;

  .header {
    display: flex;
    align-items: center;
    min-width: 0;

    .info-icon {
      position: relative;
    }

    .icon-circle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1px solid #ccc;
    }

    .icon-image {
      width: 14px;
      height:14px;
    }

    .tooltip {
      position: absolute;
      bottom: -20;
      left: 50%;
      margin-bottom: 8px;
      padding: 6px 8px;
      font-size: 10px;
      color: #fff;
      font-size: 12px;
      font-weight: 400;
      background: #454343;
      border-radius: 4px;
      white-space: nowrap;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .info-icon:hover .tooltip {
      opacity: 1;
    }
  }

  .title {
    flex: 1;
    min-width: 0;
    margin-left: 8px;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    color: #6a6969;
  }

  .detail-btn {
    cursor: pointer;
  }

  .percentage {
    font-size: 12px;
    font-weight: 400;
    color: #6a6969;
  }

  .chart {
    display: flex;
    align-items: center;
    justify-content: start;
    padding-bottom: 10px;
    flex: 1;
  }

  .pie-chart {
    height: 0.861rem;
  }

  .goal-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .goal {
    display: flex;
    align-items: center;
  }

  .goal-label {
    font-size: .0694rem;
    font-weight: 600;
    color: #155c96;
  }

  .goal-value {
    margin-left: 5px;
    font-size: .0694rem;
    font-weight: 600;
    color: #6a6969;
  }
}
</style>